<script setup lang="ts">
import { useTemplateRef } from 'vue';
import { theme } from 'ant-design-vue';
import GameView from './views/game/index.vue';
import { EVENTS, GameKernel } from './game';

const rootRef = useTemplateRef('rootRef');

function getPopupContainer() {
  return rootRef.value || document.body;
}

GameKernel.inst.bus.on(EVENTS.GAME_MANUAL_SAVE, (data) => {
  localStorage.setItem('save', data);
});
</script>

<template>
  <a-style-provider hash-priority="high">
    <a-config-provider
      :theme="{
        algorithm: theme.darkAlgorithm,
      }"
      :get-popup-container="getPopupContainer"
    >
      <a-app :message="{ maxCount: 3 }">
        <div
          ref="rootRef"
          class="h-screen select-none bg-container-background text-primary-text overflow-hidden"
        >
          <game-view></game-view>
        </div>
      </a-app>
    </a-config-provider>
  </a-style-provider>
</template>
